<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cccc_4_3</title>
    <!--[if IE]>
    <style>
         #IEBLOCK{ display: inline; } 
    </style>
    <![endif]-->
    <style>
        main#MAIN {
            margin: 10px auto 0 auto;
            padding: 0;
            width: 900px;
            height: 500px;
            font-size: 16px;
            color: #333;
        }

        main#MAIN section {
            height: 100%;
            display: none;
        }

        main#MAIN.regist section.regist,
        main#MAIN.search section.search {
            display: block;
        }

        main#MAIN form {
            display: flex;
            padding: 20px;
            height: 400px;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-content: space-around;
            font-size: 18px;
        }

        main#MAIN form div {
            display: flex;
            width: 500px;
        }

        main#MAIN form div label {
            display: block;
            width: 100px;
        }

        footer {
            display: flex;
            margin: 0 auto;
            padding: 0;
            width: 900px;
        }

        footer>div {
            width: 50%;
            text-align: center;
            padding: 10px;
        }

        .bg-regist {
            background-color: rgba(255, 65, 65, 0.2);
        }

        .bg-search {
            background-color: rgba(65, 65, 255, 0.2);
        }

        .btn-sub {
            width: 90px;
            font-size: 18px;
            line-height: 2.4em;
            border: 2px solid #333;
            border-radius: 4px;
            background-color: transparent;
            color: #333;
            cursor: pointer;
        }

        .btn-sub:hover {
            border-color: #fff;
            color: #fff;
        }
    </style>
</head>

<body>
    <h3 id="IEBLOCK" style="width: 100%; text-align: center; color: red;display: none;">请用360等浏览器的极速模式或更换浏览器</h3>
    <datalist id="datalist_department">
        <option value="财务会计部">
        <option value="投资部">
        <option value="国内市场部">
        <option value="质量管理部">
        <option value="法律管理部">
        <option value="审计部">
        <option value="纪委办公室">
        <option value="团委">
        <option value="科研技术部">
        <option value="党委工作部、企业文化部">
        <option value="工会办">
        <option value="船机管理部">
        <option value="办公室、党委办公室">
        <option value="企管中心">
        <option value="成本控制部">
        <option value="资产行政部">
        <option value="领导班子">
        <option value="人力资源部、党委组织部">
        <option value="工程管理部">
        <option value="海外事业部">
        <option value="安全环保管理部">
    </datalist>
    <main id="MAIN" class="regist">

        <section class="regist bg-regist">
            <form id="FORM_REGIST">
                <div>
                    <label>姓名: </label>
                    <input name="name" type="text" required>
                </div>
                <div>
                    <label>部门: </label>
                    <input list="datalist_department" name="department" required />
                </div>
                <div>
                    <label>联系方式: </label>
                    <input name="phone" type="text" required>
                </div>
                <div>
                    <h3 id="MSGS">&nbsp;</h3>
                </div>
            </form>
        </section>

        <section class="search bg-search">
            <form id="FORM_SEARCH">
                <div>
                    <label>姓名: </label>
                    <input name="name" type="text" required>
                </div>
                <div>
                    <label>联系方式: </label>
                    <input name="phone" type="text" required>
                </div>
                <div>
                    <h3 id="INFOS">&nbsp;</h3>
                </div>
            </form>
        </section>
    </main>
    <footer>
        <div onmouseover="showForm('regist');" class="bg-regist">
            <button id="REGIST" class="btn-sub" onclick="doRegist()">登记</button>
        </div>
        <div onmouseover="showForm('search');" class="bg-search">
            <button id="SEARCH" class="btn-sub" onclick="doSearch()">查询</button>
        </div>
    </footer>
    <script>
        var u = navigator.userAgent;
        var bws = [
            {
                name: 'ie11',
                it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
            }, {
                name: 'ie',
                it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
            }
        ];
        for (var i = 0; i < bws.length; i++) {
            if (bws[i].it) {
                document.getElementById('IEBLOCK').style.display = 'block';
                document.getElementById('MAIN').style.display = 'none';
                alert('请用浏览器的极速模式或更换浏览器');
            }
        }
    </script>
    <script src="./src/front/view/util.js"></script>
    <script>
        const MAIN = $ID('MAIN');
        const FORM_REGIST = $ID('FORM_REGIST');
        const FORM_SEARCH = $ID('FORM_SEARCH');
        const MSGS = $ID('MSGS');
        const INFOS = $ID('INFOS');
        const showForm = cls => {
            MAIN.className = cls;
        };
        const doRegist = () => {
            MSGS.textContent = '';
            if (!FORM_REGIST.checkValidity()) return alert('请完整填写所有信息');
            let submitData = Object.fromEntries((new FormData(FORM_REGIST)).entries());
            putData(`/action/pick`, submitData, (rtn) => {
                if (!rtn || !rtn.row || rtn.error) {
                    if (rtn.error) {
                        alert('提交失败');
                        if (rtn.error.found) return MSGS.textContent = '姓名或联系方式重复';
                        return MSGS.textContent = '请尝试重新提交';
                    }
                }
                if (rtn.ok) {
                    return MSGS.textContent = '登记成功，请尝试查询已登记的序号';
                }
            });
        };
        const doSearch = () => {
            INFOS.textContent = '';
            let submitData = Object.fromEntries((new FormData(FORM_SEARCH)).entries());
            if (!submitData.name && !submitData.phone) return alert('请填写一项查询信息');
            postData(`/action/pick`, submitData, (rtn) => {
                if (!rtn || !rtn.row) {
                    return INFOS.textContent = '找不到相关的信息';
                }
                if (rtn.error) {
                    return INFOS.textContent = '查询信息出错';
                }
                if (rtn.row) {
                    let { id, name, department, phone } = rtn.row
                    return INFOS.innerHTML = `找到已登记信息
                        <p> 序号:${id} &nbsp;&nbsp;&nbsp;&nbsp; 部门:${department} </p> 
                        <p> 姓名:${name} &nbsp;&nbsp;&nbsp;联系方式:${phone} </p> `;
                }
                return INFOS.textContent = '查询信息出错';
            });
        };
    </script>
</body>

</html>